<template>
  <div>
    <div>
      测试1
      <button @click="yuqian">点击发送数据</button>
    </div>
    <br>

    <h3>展示区域</h3>
    <div>
      <h4>单项选择</h4>
      <el-radio v-for="item in list" :key="item.id" v-model="redi" :label="item.ischec" @change="xufangqing" />
    </div>
    <div>
      <h4>多项选择</h4>
      <el-checkbox v-for="item in service" :key="item.id" v-model="item.ischec" :label="item.text" @change="fengjingyun" />
    </div>
    <div>
      <h4>多选</h4>
      <el-select v-model="value1" multiple placeholder="请选择" @change="zhanchunjie()">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div>
      <h4>图片上传</h4>
      <el-upload
        ref="upremove"
        :on-success="handImg"
        :headers="tokens"
        action="/lejuAdmin/material/uploadFileOss"
      >
        <el-button>点击上传</el-button>
      </el-upload>
    </div>

  </div>
</template>

<script>
// import bus from './event/eventbus'
// import bus from './event/eventbus'
import { getToken } from '@/utils/myAuth'
export default {
  data() {
    return {
      si: '要发送的数据',
      redi: '',
      // 单项选择
      list: [
        {
          id: 1,
          text: '无忧退货',
          ischec: '四岁'
        },
        {
          id: 2,
          text: '快速退款',
          ischec: '五岁'
        },
        {
          id: 3,
          text: '免费包邮',
          ischec: '六岁'// 进入页面时的状态未选中
        }
      ],
      // 多项选择
      service: [
        {
          id: 1,
          text: '无忧退货',
          ischec: false
        },
        {
          id: 2,
          text: '快速退款',
          ischec: false
        },
        {
          id: 3,
          text: '免费包邮',
          ischec: false
        }
      ],
      // 选择器多选
      options: [{
        value: '选项1',
        label: '黄金糕',
        seat: false
      }, {
        value: '选项2',
        label: '双皮奶',
        seat: false
      }, {
        value: '选项3',
        label: '蚵仔煎',
        seat: false
      }, {
        value: '选项4',
        label: '龙须面',
        seat: false
      }, {
        value: '选项5',
        label: '北京烤鸭',
        seat: false
      }],
      value1: []
    }
  },
  computed: {
    tokens() {
      return {
        token: getToken()
      }
    }
  },
  methods: {

    handImg(response, file, fileList) {
      // 上传成功就把图片地址 赋值 给接口需要的数据
      this.ruleForm.coverImg = response.data.fileUrl
      console.log(this.ruleForm.coverImg)
      // 上传成功就清空上传列表
      this.$refs.upremove.clearFiles()
    },
    // 单项选择
    xufangqing(e) {
      console.log('单选测试', e)
    },
    // 多项选择
    fengjingyun() {
      // 多选的结果是数组，然后转换成字符串
      var sisui = (this.service.filter(ele => ele.ischec).map(ele => ele.id).join('&&'))
      console.log(sisui)
    },
    // 选择器多选
    zhanchunjie(e) {
      // var sisui =
      console.log(e)
    }
  }
}
</script>

<style>

</style>
